<template>
	<view class="safety storesTransfer">

		<view class=" topHeaderBox between navBox" :style="{paddingTop: `${systemBarHeight+10}px`}">
			<image class="backIcon" src="https://wx.2024csnl.com/static/mine/blackBack.png" @click="goBack(100)"></image>
			<view>商品管理</view>
			<view class="delect">删除</view>
		</view>
		<view class="msgBox">
			<view class="card">
				<view class="between oneLine">
					<view class="leftTit">商品名称</view>
					<view class="rightText">
						<input placeholder="请输入商品名称" />
					</view>
				</view>
				<view class="between oneLine">
					<view class="leftTit">商品图片</view>
					<image class="image" src="https://wx.2024csnl.com/static/goods/sj.png"></image>
				</view>
				<view class="between oneLine flex">
					<view class="leftTit">商品分类</view>
					<view class="rightText flex">
						<picker mode="selector" :range="array" range-key="name" @change="bindPickerChange">
							<view style="font-size: 30rpx;color: #999999;width: 400rpx;text-align: right;">
								{{typeName }}
							</view>
						</picker>
						<!-- <text>早餐</text> -->
						<image class="rightArrow" src="https://wx.2024csnl.com/static/mine/rightArrow.png"></image>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="between oneLine">
					<view class="leftTit">价格</view>
					<view class="rightText">
						<input placeholder="请输入商品价格" />
					</view>
				</view>
				<view class="between oneLine">
					<view class="leftTit">库存</view>
					<view class="rightText">
						<input placeholder="请输入商品库存" />
					</view>
				</view>

				<view class="between oneLine flex">
					<view class="leftTit">是否上架</view>
					<view class="rightText flex">
						<picker mode="selector" :range="array" range-key="name" @change="bindPickerChange">
							<view style="font-size: 30rpx;color: #999999;width: 400rpx;text-align: right;">
								{{typeName }}
							</view>
						</picker>
						<!-- <text>早餐</text> -->
						<image class="rightArrow" src="https://wx.2024csnl.com/static/mine/rightArrow.png"></image>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="between oneLine">
					<view class="leftTit">商品详情</view>
					<view></view>
				</view>
				<view class="details">
					<image src="https://wx.2024csnl.com/static/goods/sj.png"></image>
				</view>

			</view>


			<view class="submitBtn flex">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeName: '选择商品分类',
				array: ['类型1', '美国', '巴西', '日本'],

				systemBarHeight: getApp().globalData.systemBarHeight,
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e)
				this.typeName = this.array[e.detail.value]
			},

		}
	}
</script>

<style lang="scss" scoped>
	.details {
		image {
			width: 100%;
			height: 600rpx;
		}
	}

	.card {
		margin-bottom: 20rpx;
	}

	input {
		text-align: right
	}

	.rightArrow {
		width: 12rpx;
		margin-top: 6rpx;
		height: 26rpx;
		margin-left: 18rpx;
	}

	.image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 15rpx;
	}

	.oneLine {
		align-items: center;
		font-size: 28rpx;
		background: #fff;
		border-bottom: 1px solid #EBEBEB;
		padding: 10rpx 29rpx;
		min-height: 100rpx;
	}

	.rightText {
		color: #999;
	}


	.leftTit {
		color: #333;

	}

	.msgBox {
		padding-top: 100rpx;
		background: #F7F7F7;
		margin-bottom: 100rpx;
	}

	.delect {
		font-size: 30rpx;
		color: #41644A;
		font-weight: 400;
	}


	.submitBtn {
		position: fixed;
		color: #fff;
		width: 100%;
		font-size: 34rpx;
		background: #41644A;
		padding: 20rpx 0;
		justify-content: center;
		bottom: 0;
	}



	.storesTransfer {
		background: #F7F7F7;
		height: 100vh;
	}

	.topHeaderBox {
		// #ifdef APP-PLUS
		padding: 30rpx;
		// #endif
		// #ifdef H5
		padding: 30rpx;
		// #endif
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99999;
		background: #fff;
		display: flex;

	}

	.navBox {
		font-size: 34rpx;
		font-weight: bold;
	}

	.backIcon {
		width: 21rpx;
		height: 37rpx;
	}
</style>